<template>
  <div class="preview flex">
      <div class="left flex">
          <div class="price" v-html="dataInfo.name"></div>
          <div class="content flex">
              <div class="name">{{dataInfo.couponName}}</div>
              <div class="expire">{{dataInfo.date}}</div>
              <div class="full_minus">{{dataInfo.description}}</div>
          </div>
      </div>
      <div class="right">
          领取
      </div>
  </div>
</template>

<script>
export default {
    props:{
        data:{
            type:Object,
            default(){
                return {};
            }
        }
    },
    data(){
        return {
            dataInfo:{},
        }
    },
    watch:{
        data:{
            handler(newObj){
                this.formatData(newObj);
            },
            immediate:true,
            deep:true,
        }
    },
    methods:{
        formDate(datetime){
            let date=new Date(datetime);
            //console.log(date);
            let y=date.getFullYear();
            let m=date.getMonth()+1;
            m=m>=10?m:'0'+m;
            let d=date.getDate();
            d=d>=10?d:'0'+d;
            let hour=date.getHours();
            hour=hour>=10?hour:'0'+hour;
            let min=date.getMinutes();
            min=min>=10?min:'0'+min;
            let sec=date.getSeconds();
            sec=sec>=10?sec:'0'+sec;
            return `${y}.${m}.${d}`;
        },
        formatData(newObj){
            console.log(newObj);
            if(newObj.couponType==0 || newObj.couponType==1 || newObj.couponType==3){
                let couponAmount=newObj.couponAmount==-1?0:newObj.couponAmount;
                newObj.name=`¥ <i>${couponAmount}</i>`;
                if(newObj.couponFullMoneyType==1){
                    newObj.description=`满${newObj.couponFullMoney}元减${couponAmount}元`;
                }
                else {
                    newObj.description=`无门槛`;
                }
            }
            else if(newObj.couponType==2 || newObj.couponType==4){
                newObj.name=`${newObj.discountRatio}折券`;                
                if(newObj.couponFullMoneyType==1){
                    newObj.description=`满${newObj.couponFullMoney}元打${newObj.discountRatio}折`;
                }
                else {
                    newObj.description=`无门槛`;
                }
            }
            if(newObj.useTimeType == 3){
                newObj.date = '永久有效'
            } else if(newObj.useTimeType == 2){
                newObj.date = '领券当日起'+newObj.receiveDaysAble+'内有效'
            } else {
                if(newObj.useEndTime){
                    if(typeof newObj.useEndTime=='string'){
                        let date=newObj.useEndTime.split(' ')[0];
                        newObj.date = '有效期至'+date.replace(/-/g,'.');
                    }
                    else {
                        newObj.date = '有效期至'+this.formDate(newObj.useEndTime);
                    }
                }
            }
            
            console.log(newObj.couponFullMoneyType);
            this.dataInfo={};
            setTimeout(()=>{
                this.dataInfo=newObj;
            });
        }
    }
}
</script>

<style lang="less" scoped>
.flex{
    display:flex;
}
.preview{
    width:100%;
    height:95px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    .left{
        background:#2A2D4C;
        height:100%;
        flex:1;
        .price {
            width:100px;
            color:#ECDBA9;
            font-size:18px;
            line-height: 95px;
            text-align: center;
            /deep/ i{
                font-size:30px;
                font-style: normal;
            }
        }
        .content {
            flex:1;
            color:#fff;
            flex-direction: column;
            justify-content:space-evenly;
            .name {
                font-size:14px;
            }
            .expire {
                font-size:12px;
            }
            .full_minus {
                color:#ECDBA9;
                font-size:11px;
            }
        }
    }
    // .flex {
    // }
    .right{
        background:#F7C86E;
        height:100%;
        width:100px;
        color:#2A2D4C;
        text-align: center;
        font-size: 16px;
        line-height: 95px;
    }
    &::before,
    &::after{
        content:'';
        display:block;
        width:14px;
        height:14px;
        border-radius: 50%;
        background:#fff;
        position:absolute;
        right:93px;        
    }
    &::before{
        top:-7px;
    }
    &::after{
        bottom:-7px;
    }
}
</style>